<template>
  <el-dialog title="附件设置" :visible.sync="dialogVisible" width="80%" style="height:100%" :append-to-body="true">
    <div class="left"> 
     <el-button type="primary" @click="add()" size="small" icon="el-icon-plus">添加</el-button>
        <el-table
            :data="tableData"
            style="width: 100%"
            row-key="kid"
            default-expand-all
            @sort-change="sortChange"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
        <el-table-column prop="createTime" label="创建时间" :formatter="timeFormat"></el-table-column>
        <el-table-column prop="fileName" label="模板名称"></el-table-column>
        <el-table-column fixed="right" label="基本操作" >
            <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                <el-button type="primary" size="small" @click="edit(scope.row.objectId)">
                <i class="el-icon-edit"></i>
                </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                <el-button size="small" @click="del(scope.row.objectId)">
                <i class="el-icon-delete"></i>
                </el-button>
            </el-tooltip>
            </template>
        </el-table-column>
        </el-table>
    </div>
    <div class="right">
      <div v-if="bool === '添加'" >
        <el-form ref="addForm" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="模板名称" prop="fileName" label-width="120px">
              <el-input v-model="form.fileName"></el-input>
            </el-form-item>
            <el-form-item label="是否必须上传" prop="isRequired" label-width="120px">
              <el-radio-group v-model="form.isRequired">
                <el-radio-button label="是" />
                <el-radio-button label="否" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="模板文件" prop="fileId" label-width="120px">
              <el-upload
                class="upload-demo"
                ref="upload"
                action="http://192.168.146.240/bat-wkflow/file/file/upload"
                :on-change="upload"
                :file-list="fileList"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="" prop="formId" label-width="100px">
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmitAdd('addForm')">添加</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </el-form-item>
        </el-form>
      </div>
      <div v-if="bool === '编辑'">
        <el-form ref="addForm" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="模板名称" prop="fileName" label-width="120px">
                <el-input v-model="form.fileName"></el-input>
            </el-form-item>
            <el-form-item label="是否上传" prop="isRequired" label-width="120px">
              <el-radio-group v-model="form.isRequired">
                <el-radio-button label="是" />
                <el-radio-button label="否" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="模板文件" prop="fileId" label-width="120px">
              <el-upload
                class="upload-demo"
                ref="upload"
                action="http://192.168.146.240/bat-wkflow/file/file/upload"
                :on-change="upload"
                :file-list="fileList"
                :before-upload = "uploadBefore"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="" prop="formId" label-width="100px">
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitEdit('addForm')">保存</el-button>
              <el-button @click="dialogVisible = false">取 消</el-button>
            </el-form-item>
        </el-form>
      </div>
    </div>
    <page
      :page="formInline.current"
      :limit="formInline.size"
      :total="formInline.total"
      @change="changePage"
    ></page>
  </el-dialog>
</template>
<script>
import TreeSelect from "@/components/basic-treeselect/treeselect";
import { activeUrl } from "@/config/env";
const urls = {
  list: activeUrl + "/file/form-accessory/list",
  add : activeUrl + "/file/form-accessory/add",
  get : activeUrl + "/file/form-accessory/edit_form",
  edit : activeUrl + "/file/form-accessory/edit",
  delete : activeUrl + "/file/form-accessory/delete",
  uplaod : activeUrl + "/file/file/upload"
};
export default {
  data() {
    return {
      dialogVisible: false,
      data: [],
      defaultCheckedKeys: [],
      form: {
        fileName: "",
        isRequired : "",
        formId : "",
        fileId : ""
      },
      rules: {
        fileName: [{ required: true, message: "请输入名称", trigger: "blur" }]
      },
      tableData : [],
      formInline: {
        name : null,
        current: 1, // 当前页
        size: 10, // 每页条数
        total: 0, // 总条数
        orders: [] // 排序
      },
      bool : "添加",
      fileList : [],
      objectId : ""
    };
  },
  components: {
    TreeSelect
  },
  methods: {
    upload(e) {
      this.form.fileId = e.uid;
      console.log(e.uid)
    },
    uploadBefore(){
      
    },
    sortChange(column, prop, order) {
      var order = {
        asc: column.order == "ascending",
        column: column.prop
      };
      var orders = [];
      orders.push(order);
      this.formInline.orders = orders;
      this.fetch();
    },
    timeFormat(row, column) {
      // 工作流时间格式化
      return new Date(+new Date(row.createTime) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
    changePage(val) {
      this.formInline.current = val;
      this.fetch();
    },
    popoverHide(checkedIds, checkedData) {
      this.form.menus = checkedIds.toString();
    },
    show(objectId) {
      this.form.formId = objectId
      this.dialogVisible = true;
      if (this.$refs["addForm"]) {
        this.$refs["addForm"].resetFields();
      }
      this.fetch();
    },
    onSubmitAdd(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.form.isRequired === "是" && this.form.fileId === "")  {
            this.$message({
              message : "请先上传文件",
              type : "warning"
            })
          }else if(this.form.isRequired === "") {
              this.$message({
              message : "请先选择是否必须上传文件",
              type : "warning"
            })
          }else {
            axios.post(urls.add, this.form).then(res => {
              this.$message(res.data.result);
              // this.dialogVisible = false;
              this.$emit("refresh");
              this.fetch();
              // this.clear()
            });
          }
          
        }
        return false;
      });
    },
    onSubmitEdit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.form.objectId = this.objectId;
          axios.post(urls.edit, this.form).then(res => {
            this.$message(res.data.result);
            // this.dialogVisible = false;
            this.$emit("refresh");
            this.clear();
            this.fetch()
          });
        }
        return false;
      });
    },
    fetch() {
      axios.post(urls.list,this.formInline).then(res => {
        const data = res.data.result
        this.tableData = data; 
        this.formInline.current = data.current;
        this.formInline.size = data.size;
        this.formInline.total = data.total;
      });
    },
    edit(id) {
      this.bool = "编辑";
      axios.get(urls.get,{params : {objectId : id}}).then(res => {
        const data = res.data.result;
        this.form.fileName = data.fileName;
        this.form.isRequired = data.isRequired
        this.form.fileId = data.fileId;
        this.form.formId = data.formId;
        this.objectId = data.objectId
      })
    },
    add() {
      this.bool = "添加";
      this.clear();
    },
    del(objectId) {
      axios.get(urls.delete,{params : {objectId : objectId}}).then(res => {
        this.fetch()
      })
    },
    clear() {
        this.form.fileName = "";
        this.form.isRequired = ""
        this.form.fileId = "";
        this.form.formId = ""
    }
  }
};
</script>
<style scoped>
    .left {
        width: 70%;
        float: left;
    }
    .right {
      border-left: 2px solid #ccc;
      width: 28%;
      float: right;
    }
    /deep/ .el-dialog {
        height: 80%;
    }
</style>